<!DOCTYPE html>



<html lang="en">





<head>



    <meta charset="UTF-8">



    <meta http-equiv="X-UA-Compatible" content="IE=edge">



    <meta name="viewport" content="width=device-width, initial-scale=1.0">



    <title>Document</title>



    <link rel="stylesheet" href="京东实例.css">



</head>





<body>



    <div class="box">



        <ul>



            <li>



                <h1>逛好店</h1>



                <div class="img1"></div>



            <>



            <li>



                <div class="box2">



                    <div class="box21"> 贝恩施京东官方自营旗舰店



                        <p class="p1">自营</p>



                        <p class="p2">277.9万人关注</p>



                    </div>



                    <div class="box22">



                        <img class="img2" src="./1.jpg" style="width: 130px;">



                    </div>



                </div>



            <>



            <li>



                <div class="box3">



                    <div class="box31"> 美宝莲京东官方自营旗舰店



                        <p class="p1">自营</p>



                        <p class=" p2">192.9万人关注</p>



                    </div>



                    <div class="box32">



                        <img class="img2" src="./2.jpg" style="width: 130px;">



                    </div>



                </div>



            <>



        </ul>



    </div>



</body>





<ml>







* {



    margin: 0;



    padding: 0;



    list-style: none;



}





h1 {



    display: inline-block;



}





.img1 {





    display: inline-block;



    width: 20px;



    height: 20px;



    background-position: right top;



    background-image: url("./arrow.png");



    background-size: 40px;



}





ul {





    padding: 10px;



}





li {



    margin-bottom: 10px;



}





.img1:hover {



    background-position: left top;



}





.box {



    margin: 100px auto;



    width: 320px;



    box-shadow: 0 0 15px #999;



}





.box2 {



    width: 300px;



    height: 150px;



    background: #f6e9f0;



}





.box3 {





    width: 300px;



    height: 150px;



    background: #f6e9f0;



}





.box21 {



    margin: 10px 5px;



    float: left;



    width: 150px;



    height: 150px;



}
.p1 {

   margin-top: 3px;

    border: 2px solid red;

    width: 40px;

    text-align: center;

    color: red;

}


.p2 {

    margin-top: 30px;

    color: #999;

}

.box22 {

    margin-top: 10px;

    float: left;

    width: 130px;

    height: 130px;

}


.box31 {

    margin: 0 5px;

    float: left;

    width: 150px;

    height: 150px;

}

.box32 {

    float: left;

    width: 130px;

    height: 130px;

}